<template>
  <div class="wrapper">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/3-1'}">用户管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/3-1'}">用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <el-col :span="18" :offset="3" class="column">
        <div>
          微信号
          <el-autocomplete
            class="inline-input"
            v-model="state1"
            :fetch-suggestions="querySearch"
          ></el-autocomplete>
        </div>
        <div>
          手机号
          <el-autocomplete
            class="inline-input"
            v-model="state2"
            :fetch-suggestions="querySearch2"
          ></el-autocomplete>
        </div>
        <div>
          宝宝昵称
          <el-autocomplete
            class="inline-input"
            v-model="state3"
            :fetch-suggestions="querySearch1"
          ></el-autocomplete>
        </div>
        <div>
          <el-button type="primary" @click="handlereset">
            重置
          </el-button>
          <el-button type="success" @click="handlesearch">
            搜索
          </el-button>
        </div>
      </el-col>
      <el-col :span="18" :offset="3">
        <el-table :data="tableData" stripe border style="margin-top:20px"  v-loading="loading">
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="wechatNumber" label="微信号"></el-table-column>
          <el-table-column prop="phone" label="手机号"></el-table-column>
          <el-table-column prop="babyName" label="宝宝昵称"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="checkout(scope.row.id)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="20" class="pager">
        <el-pagination
          :page-sizes="[10, 20, 30, 50]"
          :page-size="parseInt(pager.size)"
          layout="total, sizes, prev, pager, next, jumper"
          :total="parseInt(total)"
          @current-change="handleCurrentChange"
          :current-page="parseInt(pager.page)"
          @size-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import axios from 'axios'
  import {
    signlist
  } from '@/api/signlist/signlist'
  export default {
    name: "UserList",
    inject: ['reload'],
    data() {
      return {
        loading:true,
        state2: '',
        pager: {
          page: '',
          size: ''
        },
        total:'',
        currentPage: 1,
        state1: '',
        state3: '',
        userInfo: [],
        wechat: [],
        nickname: [],
        phone: [],
        tableData: []
      }
    },
    methods: {
      handlesearch(){
        if(this.state1){
          localStorage.userstate1 = this.state1;
        }
        if(this.state2){
          localStorage.userstate2 = this.state2;
        }
        if(this.state3){
          localStorage.userstate3 = this.state3;
        }
        console.log(this.value6);
        this.reload();
      },
      handlereset(){
        localStorage.userstate1='';
        localStorage.userstate2='';
        localStorage.userstate3='';
        this.reload();
      },
      handleCurrentChange(val) {
        console.log(val);
        localStorage.userpage = val;
        this.pager.page = val;
        this.getNavbarInfo();
      },
      handleSizeChange(val) {
        localStorage.usersize = val;
        this.pager.size = val;
        this.getNavbarInfo();
      },
      querySearch(queryString, cb) {
        var wechat = this.wechat;
        var results = queryString ? wechat.filter(this.createFilter(queryString)) : wechat;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (wechat) => {
          return (wechat.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      querySearch1(queryString, cb) {
        var nickname = this.nickname;
        var results = queryString ? nickname.filter(this.createFilter(queryString)) : nickname;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter1(queryString) {
        return (nickname) => {
          return (nickname.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      querySearch2(queryString, cb) {
        var phone = this.phone;
        var results = queryString ? phone.filter(this.createFilter(queryString)) : phone;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter2(queryString) {
        return (phone) => {
          return (phone.value)
        };
      },
      getNavbarInfo() {
        let params={};
        this.pager.size=localStorage.usersize?localStorage.usersize:10;
        this.pager.page=localStorage.userpage?localStorage.userpage:1;
        if(localStorage.userstate1){
          params.wechatNumber=localStorage.userstate1;
        }
        if(localStorage.userstate2){
          params.phone=localStorage.userstate2;
        }
        if(localStorage.userstate3){
          params.babyName=localStorage.userstate3;
        }
        params.page=this.pager.page;
        params.size=this.pager.size;
        signlist(params).then(this.userlist)
      },
      userlist(res) {
        console.log(res);
        this.total=res.data.totle;
        this.loading=false;
          this.tableData = res.data.UserList;
      },
      checkout(id) {
        this.$router.push({name: 'UserInfo', query: {index: id}})
      }
    },
    mounted() {
      this.getNavbarInfo();
    }
  }
</script>

<style lang="less" scoped>
  @import "~styles/z.less";
  @import "~styles/css3.less";
  @import "~styles/variables.less";

  .pager{
    /deep/ .el-pagination{
      margin:20px 120px;
    }
  }
  .wrapper {
    .w100;
    padding: 10px;
    .column {
      .flexb;
      padding-top: 50px;
      div {
        .flexb;
        align-items: center;
      }
    }
  }
</style>
